import React from "react";
import { useDrop, DropTargetMonitor } from "react-dnd";
const defaultStyle = {
  width: "100%",
  height: "100%"
}
interface IDropWrapperProps {
  accept: string;
  onDrop?: (data: any, monitor: DropTargetMonitor) => any;
  className?: string;
  style?: React.CSSProperties;
}
const DropWrapper: React.FC<IDropWrapperProps> = ({ accept, onDrop, className, style, children }) => {
  const [, droper] = useDrop({
    accept,
    collect: (minoter: DropTargetMonitor) => {
      return minoter.isOver();
    },
    drop: onDrop
  })
  return <div ref={droper} className={`v-drop-wrapper ${className}`} style={{ ...defaultStyle, ...style }}>{ children }</div>
}

export default DropWrapper;